<template>
  <div>
    <div class="row-header">
      <el-form ref="form" label-width="50px">
        <el-form-item label=" " prop="operatorNumber">
          <el-input size="small" v-model.trim="operatorNumber" placeholder="请输入业务号码/ICCID/IMSI/MSISDN" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" @click="currentPage =1;list()" icon="el-icon-search">查询</el-button>
        <el-button type="shenda" size="small" @click="downloadFile" :loading="loading" icon="el-icon-download">导出</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-table
        :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
        :data="tableData"
        ref="table"
        tooltip-effect="dark"
        class="row-main-table"
        @selection-change="handleSelectionChange"
        v-loading.fullscreen="tableLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        @sort-change="changeSort"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          sortable='custom'
          prop="cardNumber"
          label="业务号码"
          align="center"/>
        <el-table-column
          prop="iccid"
          label="iccid"
          align="center"/>
        <el-table-column
          prop="imsi"
          label="imsi"
          align="center"/>
        <el-table-column
          prop="msisdn"
          label="msisdn"
          align="center"/>
        <el-table-column
          prop="remark"
          label="原因"
          align="center"/>
        <el-table-column align="center" prop="disabledDate" label="卡板禁用时间" width="120">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.disTime" placement="top-start">
              <div style="width: 60px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer">{{scope.row.disTime}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="empName"
          label="操作人"
          align="center"/>
        <el-table-column
          sortable='custom'
          prop="insertTime"
          label="操作时间"
          align="center"/>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div class="el-dropdown-link">
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button class="operation" style="width: 100%;" @click="removeDisabledCard(scope.row)">解禁</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :page-count='maxPage'
          :total="totalPage"
          :page-sizes="[10,20,50,100]"
          background
          class="row-main-pager"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {listForDisabled, removeDisabledCard} from '@/api/getData'

  export default {
    name: 'Home',
    data() {
      return {
        operatorNumber:"",
        tableData : [],
        ascs: [],
        descs: [],
        pageSize: 10,
        currentPage: 1,
        maxPage:1,
        totalPage:0,
        tableLoading: false,
        loading: false,
      }
    },

    created() {
      this.list()
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      removeDisabledCard(disabledrule) {
        this.$confirm('确认解禁该卡吗？')
          .then(_ => {
            const returnData = removeDisabledCard({
              id : disabledrule.id
            })
            if(returnData._result){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.list();
            }
          })
      },
      //排序
      changeSort(column) {
        //console.log(column);
        if (column.order == 'ascending') {
          this.descs = []
          this.ascs = [column.prop];
        } else {
          this.ascs = []
          this.descs = [column.prop];
        }
        this.list();
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.list()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.list()
      },
      async list() {
        this.tableLoading = true;
        const returnData = await listForDisabled({
            operatorNumber:this.operatorNumber,
            page: {
              current: this.currentPage + '',
              size: this.pageSize + '',
              ascs: this.ascs,
              descs: this.descs
            }
          },
          {
            obj: this,
            key: 'tableLoading'
          })
        this.tableData = [];
        this.totalPage = 0;
        if (returnData._result) {
          this.tableLoading = false
          this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
          this.totalPage = returnData.data.total;
          // 数据回显
          returnData.data.records.map(item => {
            const obj = {}
            obj.id = item.id //操作流水号
            obj.insertTime = item.insertTime //操作时间
            obj.empId = item.empId // 操作人ID
            obj.empName = item.empName // 操作人姓名
            obj.cardNumber = item.cardNumber //业务号码
            obj.iccid = item.iccid //iccid
            obj.imsi = item.imsi //imsi
            obj.msisdn = item.msisdn //msisdn
            obj.remark = item.remark // 被禁用或者解禁的原因
            obj.disTime = '永久禁用' // 被禁用的时间
            obj.oemId = item.oemId  // oem主键

            if(item.disableStartTime&&item.disableEndTime){
              obj.disTime = item.disableStartTime + ' 至 ' + item.disableEndTime
            }
            if(item.disableStartDate&&item.disableEndDate){
              obj.disTime = item.disableStartDate + ' 至 ' + item.disableEndDate
            }
            if(item.disableStartTime&&item.disableEndTime&&item.disableStartDate&&item.disableEndDate) {
              obj.disTime = item.disableStartDate + ' ' + item.disableStartTime + ' 至 ' + item.disableEndDate + ' ' +  item.disableEndTime
            }
            this.tableData.push(obj)
          })
          this.tableLoading = false
        }
      },
      async downloadFile(){
        this.loading = true;
        this.tableLoading = true;
        let obj = {
          operatorNumber:this.operatorNumber,
          page: {
            current: '1',
            size: this.totalPage + '',
            ascs: this.ascs,
            descs: this.descs
          }
        };
        let arr = new Array(...this.$refs.table.columns);
        arr.shift();
        let list = [];
        let filterVal = [];
        for (let item of arr) {
          list.push(item.label);
          filterVal.push(item.property);
        }
        list.pop();
        filterVal.pop();
        let info = {
          name: '禁用卡列表',
          api: 'listForDisabled',
        }
        this.tableLoading = false;
        this.loading = false;
        const { href } = this.$router.resolve({
          path: '/exl/exlDownload',
          query: {
            list: JSON.stringify(list),
            filterVal: JSON.stringify(filterVal),
            info: JSON.stringify(info),
            obj: JSON.stringify(obj),
          }
        });
        window.open(href, '_blank');
      }
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .disabledList-title {
    font-weight: bold;
    font-size: 14px;
    color: #606266;
    margin-right: 10px;
  }

  .disabledList-tableTitle {
    font-weight: bold;
    color: #606266;
  }

  .block {
    text-align: right;
  }

  .el-dropdown-link {
    font-size: 20px;
    cursor: pointer;
  }

  .el-popper[x-placement^=bottom] {
    margin-right: -51px;
    box-shadow: 0px 0px 10px #888888;
    margin-left: 10px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }


</style>
